<template>
  <view class="exercise-record">    
    <!-- 时间筛选 -->
    <view class="time-filter">
      <view 
        class="filter-item" 
        v-for="(item, index) in filterItems" 
        :key="index"
        :class="{ active: currentFilter === index }"
        @tap="changeFilter(index)"
      >
        {{ item }}
      </view>
    </view>
    
    <!-- 运动记录列表 -->
    <view class="record-list">
      <view class="record-item" v-for="(item, index) in exerciseRecords" :key="index">
        <view class="record-left">
          <view class="icon-wrapper">
            <text class="iconfont fire-icon">&#xe603;</text>
          </view>
          <view class="record-info">
            <view class="record-title">热量消耗 {{ item.calories }}千卡</view>
            <view class="record-time">运动时长 {{ item.duration }}</view>
          </view>
        </view>
        <view class="record-right">
          <view class="record-type">{{ item.type }}</view>
          <view class="record-date">{{ item.date }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 时间筛选选项
      filterItems: ['一周内', '一月内', '三月内'],
      currentFilter: 0,
      
      // 运动记录数据（模拟数据）
      exerciseRecords: [
        {
          calories: 286,
          duration: '17:09:13',
          type: '羽毛球',
          date: '2025-06-03 17:09:13'
        },
        {
          calories: 286,
          duration: '17:09:13',
          type: '羽毛球',
          date: '2025-06-03 17:09:13'
        },
        {
          calories: 286,
          duration: '17:09:13',
          type: '羽毛球',
          date: '2025-06-03 17:09:13'
        },
        {
          calories: 286,
          duration: '17:09:13',
          type: '羽毛球',
          date: '2025-06-03 17:09:13'
        }
      ]
    };
  },
  methods: {
    // 切换时间筛选
    changeFilter(index) {
      this.currentFilter = index;
      // 实际项目中这里应该根据筛选条件请求数据
      this.fetchExerciseRecords(index);
    },
    
    // 获取运动记录数据
    fetchExerciseRecords(filterIndex) {
      // 模拟请求数据
      // 实际项目中这里应该根据筛选条件请求后端数据
      uni.showLoading({
        title: '加载中'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        // 这里只是模拟，实际数据不变
      }, 500);
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss">
.exercise-record {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  // 导航栏
  .nav-bar {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 30rpx;
    background-color: #fff;
    
    .back-icon {
      width: 44rpx;
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
    }
    
    .action-icons {
      display: flex;
      gap: 30rpx;
      
      .iconfont {
        font-size: 44rpx;
      }
    }
  }
  
  // 时间筛选
  .time-filter {
    display: flex;
    background-color: #fff;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .filter-item {
      flex: 1;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #333;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      margin: 0 10rpx;
      
      &:first-child {
        margin-left: 0;
      }
      
      &:last-child {
        margin-right: 0;
      }
      
      &.active {
        background-color: #e6f7ff;
        color: #1890ff;
      }
    }
  }
  
  // 运动记录列表
  .record-list {
    padding: 20rpx 30rpx;
    
    .record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .record-left {
        display: flex;
        align-items: center;
        
        .icon-wrapper {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background-color: rgba(255, 59, 48, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          
          .fire-icon {
            color: #ff3b30;
            font-size: 40rpx;
          }
        }
        
        .record-info {
          .record-title {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
            margin-bottom: 10rpx;
          }
          
          .record-time {
            font-size: 26rpx;
            color: #666;
          }
        }
      }
      
      .record-right {
        text-align: right;
        
        .record-type {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .record-date {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
